import React, { useRef, useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import Svg, { Circle } from 'react-native-svg';
import Animated, {
  useAnimatedProps,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

type Props = {
    radius: number;
    progress:number;
}

const CircularProgress:React.FC<Props> = (props) => {
    const { progress, radius } = props
  const circumference = 2 * Math.PI * radius; // 计算圆周长
  const animatedProps = useAnimatedProps(() => ({
    strokeDashoffset: circumference - (circumference * progress) / 100,
  }));

  useEffect(() => {
    animatedProps.strokeDashoffset = withTiming(
      circumference - (circumference * progress) / 100,
      { duration: 1000 }
    );
  }, [animatedProps, circumference, progress]);

  return (
    <View>
      <Svg width={radius * 2} height={radius * 2}>
        <Circle
          cx={radius}
          cy={radius}
          r={radius - 10} // 圆半径减去描边宽度
          stroke="#f0f0f0" // 描边颜色
          strokeWidth="10" // 描边宽度
        />
        <AnimatedCircle
          animatedProps={animatedProps}
          fill="transparent"
          stroke="blue" // 进度条颜色
          strokeWidth="10" // 进度条宽度
          strokeLinecap="round" // 线段末端形状
          rotation="-90" // 旋转角度，使进度从顶部开始
          origin={`${radius}, ${radius}`} // 设置原点为中心
        //   radius={radius - 10} // 圆半径减去描边宽度
        />
      </Svg>
    </View>
  );
};

export default CircularProgress;
